<!-- wowjs -->
<link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css" />
<script src="/assets/home/plugin/wowjs/wow.min.js"></script>

<!-- 下拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<!-- 引入http请求插件 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>

<link rel="stylesheet" href="/assets/home/css/teacher_list.css" />





<!-- 搜索框 -->
<div class="search mui-input-row mui-search">
    <input type="search" placeholder="请输入名师名称" name="search" />
</div>

<!-- 讲师列表 -->
<div id="list">
    <div class="list"></div>
</div>

<!-- 底部 -->
{include file="common/footer" /}


<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true) 
        callback: function (box) {
            // 每次动画启动时都会触发这个回调函数
            //传入的参数是动画DOM节点
            // console.log(box)
        },
        scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
    }).init();

    var keywords = '';
    var page = 0; //当前页
    var limit = 5; //每页查询5条。也就是，在下拉框那里，下滑加载，下拉到5条，这里就跳到下一页

    $("input[name=search]").change(function () {
        keywords = $(this).val()
        DownCallback()
    })

    //配置下拉刷新和上拉加载
    var scroll = new MeScroll('list', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: limit //每页数据条数,默认10
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 300,
                src: "/assets/home/plugin/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100,
                supportTap: true, //快速响应
            }
        }
    })


    // 下拉刷新回调。触发的回调方法
    function DownCallback() {
        scroll.resetUpScroll()
        $('#list .list').empty()
    }

    // 上拉刷新回调
    async function UpCallback(current) {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page: page,
            limit: limit,
            keywords: keywords
        };

        var result = await POST({
            // ajax请求的地址。触发的控制器方法,是在控制器fast/application/home/controller/index.php里面的老师搜索方法teach（）
            url: '/teacher/index',
            params: data
        })

        if (!result) return false

        if (result.code == 0) {
            mui.toast(result.msg, { duration: 1000 })
            // 暂无更多数据
            scroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置上拉加载状态
        scroll.endBySize(list.length, count)
        FetchList(list)
    }

    // 追加渲染数据
    function FetchList(list) {
        for (var item of list) {
            var temp = `
            <div class="item wow bounceIn" data-wow-delay="0.1s">
                <a href="{:url('home/teacher/info')}?teacherid=${item.id}">
                    <div class="avatar">
                        <img src="${item.avatar_text}" alt="">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.name}</h5>
                        <p class="course">课程：${item.count_text}个</p>
                        <p class="job">职位：${item.job}</p>
                        <p class="content">简介：${item.content}</p>
                        <div class="follow">
                            <img src="/assets/home/images/like.png" />
                            <span>${item.follows_text}</span>
                        </div>
                    </div>
                </a>
            </div>
            `
            /* 1.解析：:url('home/teacher/info')}?teacherid=${item.id}
                原来正常写法是:url('home/teacher/info',[teacherid])，但是这里是在js循环，js里面的变量是给不进去Js循环里面，
                所以要把要传的参数写到url方法的外面，也就是写到大括号的外面去，这样就不是在tp的范畴内，这样就可以用js的方式输出。
                写法是在中间加个'？'。
                这里是写fa_subject的捆绑的叫外键teacherid。传到同目录下的info.html
                传到控制器application/home/controller/Teacher.php的info()方法*/

            // 获取到上面id=list里面的class=list的元素，
            $('#list .list').append(temp)
        }
    }

</script>